#subs_page_loading_indicator {
    margin: 10px auto;
}

.member_list_loading_indicator,
.subscriber_list_loading_indicator {
    margin: 10px auto;
}

.member_list_loading_indicator:empty,
.subscriber_list_loading_indicator:empty {
    margin: 0;
}

.subscriptions div #response {
    overflow-wrap: break-word;
}

.subscription_settings .bootstrap-btn {
    border-radius: 2px;
}

.stream-email {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: "Source Code Pro", monospace;
    padding: 10px;
    font-size: 0.85em; /* 13.6px at 16px/em (previously 0.85rem) */
    background-color: var(--color-background-stream-email);
    border: 1px solid hsl(0deg 0% 87%);
    border-radius: 4px;
}

.stream-email .email-address {
    display: block;
    flex: 0 0 90%;
    overflow-wrap: break-word;
    word-break: break-all;
    white-space: normal;
}

.stream-email .copy-email-address {
    font-size: 1.1765em; /* 16px at 13.6px/em */
}

.sub_setting_checkbox {
    display: flex;

    & .control-label-disabled label.checkbox + label {
        cursor: not-allowed;
    }
}

.mute-note {
    font-size: 90%;
    opacity: 0.5;
}

.hide-mute-note {
    display: none;
}

.sub_setting_control {
    display: inline-block;
    margin-right: 10px;
}

#add_new_user_group {
    margin-left: auto;
    height: var(--settings-overlay-header-button-height);
}

.two-pane-settings-plus-button {
    font-weight: 400;
    position: relative;
    border: 1px solid var(--color-border-settings-plus-button);
    border-radius: 5px;
    background-color: var(--color-background-settings-plus-button);
    color: var(--color-text-settings-plus-button);
    margin: 0;
    height: 100%;
    width: var(--settings-overlay-header-button-height);
    display: flex;
    align-items: center;
    justify-content: center;

    &:hover {
        border: 1px solid hsl(0deg 0% 47%);
    }

    .create_button_plus_sign {
        line-height: 1em;
        display: block;
        font-size: 1.2em;
        opacity: 0.8;
    }

    &:disabled {
        /* Replicate disabled values */
        cursor: not-allowed;
        opacity: 0.5;
    }
}

#create_user_group_description,
#create_stream_description {
    width: calc(100% - 15px);
}

.user_group_creation_error,
.stream_creation_error,
#settings-topics-already-exist-error {
    display: none;
    margin-left: 2px;
    color: hsl(0deg 100% 50%);
}

.stream_creation_error a,
#change_stream_name_error a {
    text-decoration: underline;
}

#change_stream_name {
    margin-bottom: 0;
}

#change_stream_name_error {
    color: hsl(0deg 100% 50%);
}

.change-stream-name-container {
    margin-bottom: 20px;
}

/* TODO: Unify with settings.css definition */
h3.stream_setting_subsection_title,
h3.user_group_setting_subsection_title {
    display: inline-block;
    font-size: 1.5em;
    font-weight: normal;
    line-height: 1.5;
    margin: 4px 0;
}

h4.stream_setting_subsection_title {
    margin-bottom: 5px;
}

h4.stream_setting_subsection_title,
h4.user_group_setting_subsection_title {
    display: inline-block;
    font-size: 1.35em;
    font-weight: normal;
    line-height: 1.5;
}

.subscriber_list_settings_container.no-display {
    display: none;
}

.subscriber-list-settings-loading {
    display: flex;
    align-items: center;
    margin: auto;
    margin-top: 100px;
}

#people_to_add_in_group,
#people_to_add,
.member_list_settings_container,
.subscriber_list_settings_container {
    display: flex;
    flex-direction: column;

    .input-group {
        margin-bottom: 10px;
    }
}

.add-group-member-loading-spinner,
.add-subscriber-loading-spinner {
    align-self: center;
}

.member-list-box,
.subscriber-list-box {
    text-align: center;
    border-left: 1px solid var(--color-border-table-subscriber-list);
    border-right: 1px solid var(--color-border-table-subscriber-list);
    border-radius: 4px;

    .member_list_container,
    .subscriber_list_container {
        position: relative;
        border-bottom: 1px solid var(--color-border-table-subscriber-list);
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        max-height: var(--stream-subscriber-list-max-height);
        overflow: auto;
        text-align: left;
        -webkit-overflow-scrolling: touch;

        .member-list,
        .subscriber-list {
            width: 100%;
            margin: auto;

            & tbody {
                border-bottom: none;
            }

            & tr {
                & td,
                th {
                    padding: 4px 10px 4px 5px;
                    vertical-align: middle;

                    &:first-of-type {
                        padding-left: 10px;
                    }
                }
            }

            & thead {
                position: sticky;
                top: 0;
                z-index: 1;

                th {
                    &:first-of-type {
                        border-top-left-radius: 4px;
                    }

                    &:last-of-type {
                        border-top-right-radius: 4px;
                    }
                }
            }

            .hidden-subscriber-email {
                font-style: italic;
            }

            .strikethrough {
                text-decoration: line-through;
            }
        }
    }
}

.subscriber-name,
.subscriber-email {
    padding: 5px;
}

.subscriber-email {
    margin-left: 20px;
    padding-right: 8px;
}

.subscriber_list_add,
.member_list_add {
    width: 100%;
    margin: 0 0 10px;
}

.user_group_subscription_request_result,
.stream_subscription_request_result {
    & a {
        color: inherit;
    }
    margin-bottom: 10px;
}

.member-search,
.subscriber-search {
    margin: 10px 0 0;

    .search {
        max-width: 160px;
    }

    @media (max-width: $ms_min) {
        float: none;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin: 0 0 5px;
    }
}

.subscriber_list_add .form-inline,
.member_list_add .form-inline {
    margin-bottom: 0;
}

.add_subscribers_container,
.add_members_container {
    display: inline-flex;
    width: 100%;
    align-items: center;

    /* We need on click events to fire on this input for our typeahead.
       This ensures that the input occupies space in the parent
       container. */
    .input {
        flex-grow: 1;
    }
}

.add_subscriber_button_wrapper,
.add_member_button_wrapper {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    place-items: center;

    .check,
    .add-subscriber-button,
    .add-member-button {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        z-index: 1;
        visibility: visible;
        max-height: 1.75em;
        width: 100%;
        position: relative;

        &.hidden-below {
            visibility: hidden;
            z-index: -1;
        }
    }
}

.add_subscribers_container .add_subscriber_button_wrapper,
.add_members_container .add_member_button_wrapper {
    padding-left: 5px;
}

.add-subscribers-subtitle,
.add-members-subtitle {
    opacity: 0.7;
}

.choose-subscribers-label {
    display: inline;
}

.two-pane-settings-container .two-pane-settings-header .fa-chevron-left {
    position: relative;
    transform: translate(-50px, 0);
    opacity: 0;
    color: hsl(0deg 0% 67%);

    float: left;
    padding: 2px 10px;

    cursor: pointer;
    visibility: hidden;

    transition: 0.3s ease;
    transition-property: opacity, transform;
}

.two-pane-settings-container
    .two-pane-settings-header.slide-left
    .fa-chevron-left,
#settings_overlay_container
    .settings-header.mobile.slide-left
    .fa-chevron-left {
    transform: translate(0, 0);
    opacity: 1;
}

.group-assigned-permissions {
    .subsection-header {
        h3 {
            font-size: 1.5em;
            font-weight: normal;
            line-height: 1.5;
            display: inline;

            .channel-privacy-type-icon {
                margin-right: 4px;
            }
        }
    }

    .subsection-settings {
        margin-top: 10px;

        .input-group {
            margin-bottom: 1.25em; /* 20px at 16px/em */
        }
    }

    .no-permissions-for-group-text {
        font-size: 1.5em;
    }

    .inline {
        display: inline;
    }
}

.two-pane-settings-container .two-pane-settings-subheader {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--color-border-modal-bar);
    grid-area: settings-overlay-subheader;
    justify-content: center;

    .list-toggler-container {
        flex-wrap: wrap;
        padding: 8px;
        display: flex;
        justify-content: end;
        flex-grow: 1;
        gap: 5px;
        align-self: start;
    }

    .tab-switcher.stream_sorter_toggle {
        margin-left: auto;
    }

    .tab-switcher,
    #add_new_subscription {
        margin: 0;
        height: var(--settings-overlay-header-button-height);
    }

    .display-type {
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 600;
        padding: 10px;
        overflow: hidden;

        & a {
            color: inherit;

            &:hover {
                color: inherit;
                text-decoration: none;
            }
        }

        &.preview::after {
            content: "Preview";
        }

        &.preferences::after {
            content: "Preferences";
        }

        .stream-info-title,
        .user-group-info-title {
            display: none;
            font-size: 1.5em; /* 21px at 14px/em */
            line-height: 1.25;
            font-weight: 600;
            overflow-wrap: break-word;
            line-clamp: 2;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;

            &.showing-info-title {
                display: -webkit-box;
            }

            .large-icon {
                display: inline-block;
                margin-left: 5px;

                .zulip-icon {
                    font-size: 0.75em; /* 18px at 24px/em */
                }
            }
        }

        .user-group-info-title {
            margin-left: 5px;
        }

        .deactivated-user-group-icon-right {
            margin-right: 5px;
        }
    }
}

.two-pane-settings-container {
    display: grid;
    grid-template:
        "settings-overlay-header   " var(--settings-overlay-header-height)
        "settings-overlay-content     " minmax(0, 1fr) / 100%;
    height: 95%;
    border-radius: 4px;
    padding: 0;
    width: 97%;
    position: relative;
    overflow: hidden;
    max-width: 1200px;
    max-height: var(--overlay-container-max-height);

    /* This variable allows JavaScript to detect whether we are showing both
    the left sidebar and settings content for the current screen width or not. */
    --column-count: 2;

    .list-toggler-container .tab-switcher .ind-tab {
        width: auto;
        display: flex;
        padding: 0 10px;

        .fa {
            font-size: 1em;
        }
    }

    .two-pane-settings-header {
        grid-area: settings-overlay-header;
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-transform: uppercase;
        font-weight: 700;
        background-color: var(--color-background-modal-bar);
        border-bottom: 1px solid var(--color-border-modal-bar);

        .exit {
            font-weight: 600;
            color: hsl(0deg 0% 67%);
            cursor: pointer;
        }
    }

    .two-pane-settings-content {
        grid-area: settings-overlay-content;
        display: flex;

        .left,
        .right {
            display: grid;
            grid-template:
                "settings-overlay-subheader" minmax(
                    var(--settings-overlay-subheader-height),
                    max-content
                )
                "settings-overlay-body     " minmax(0, 1fr) / 100%;
        }
    }

    .exit-sign {
        font-size: 1.5em;
        margin-right: 0.7142em; /* 10px at 14px em */
        font-weight: 600;
        cursor: pointer;
    }

    .left .no-streams-to-show,
    .left .no-groups-to-show,
    .right .nothing-selected .create-stream-button-container {
        display: block;
        text-align: center;
        font-size: 1em;
        margin-left: 2em;
        margin-right: 2em;

        .settings-empty-option-text {
            color: var(--color-text-item);
        }
    }

    .left .no-streams-to-show,
    .left .no-groups-to-show {
        margin-top: calc(45vh - 75px);
    }

    .right .nothing-selected {
        padding: 5px 5px 0;

        .stream-info-banner a,
        .group-info-banner a {
            color: inherit;
        }

        .create-stream-button-container {
            margin-top: calc(45vh - 128px);
        }

        .create-group-button-container {
            margin-top: calc(45vh - 134px);
            text-align: center;

            .settings-empty-option-text {
                color: var(--color-text-item);
            }
        }
    }

    .left {
        width: 40%;
    }

    .right {
        width: calc(60% + 1px);
        border-left: 1px solid var(--color-border-modal-bar);
        box-sizing: border-box;

        .nothing-selected .create_stream_button,
        .nothing-selected .create_user_group_button {
            padding: 6px 10px 8px;
            display: block;
            margin: 0 auto 10px;
        }

        .main-view-banner.group_deactivated {
            margin-bottom: 10px;
        }
    }

    & input[type="text"].small {
        border: 1px solid hsl(0deg 0% 80%);
        border-radius: 4px;
        padding: 3px;
        outline: none;
        color: hsl(0deg 0% 27%);
        text-align: center;

        &:focus {
            text-align: left;
        }

        &:valid {
            text-align: left;
        }
    }
}

#search_stream_name,
#search_group_name {
    box-shadow: none;
    padding-right: 28px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    grid-column: search-input-start / clear-search-end;
    grid-row: search-input;
}

.stream_name_search_section,
.group_name_search_section {
    padding: 8px 10px;
    display: grid;
    grid-template:
        "search-input clear-search dropdown-widget" auto / minmax(0, 1fr)
        30px;
    border-bottom: 1px solid var(--color-border-modal-bar);
}

#stream_settings_filter_widget {
    margin-left: 10px;
    gap: 3px;
    width: auto;
}

.stream_settings_filter_container.hide_filter {
    display: none;
}

#user_group_visibility_settings_widget {
    grid-area: more-options-button;
    margin-left: 10px;
    display: flex;
    gap: 3px;
    width: auto;
}

.user-groups-list,
.streams-list {
    position: relative;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

.left .group-name-wrapper .fa-ban,
.right .group-name .fa-ban {
    font-size: 0.8em;
    opacity: 0.6;
}

.deactivated-user-group-icon-right {
    margin-left: 3px;
    opacity: 0.6;
}

.left .group-name-wrapper,
.right .group-name {
    display: flex;
    gap: 3px;
    align-items: center;
}

.user-groups-list.hide-deactivated-user-groups .deactivated-group {
    display: none;
}

.user-groups-list.hide-active-user-groups .group-row:not(.deactivated-group) {
    display: none;
}

.user_group_visibility_settings-dropdown-list-container .dropdown-list-wrapper {
    min-width: 11em;
}

#search_group_name:placeholder-shown + #clear_search_group_name {
    visibility: hidden;
}

#search_stream_name:placeholder-shown + #clear_search_stream_name {
    visibility: hidden;
}

.stream-title {
    font-size: 1.3em;
    font-weight: 400;
}

.user-group-creation-body,
.stream-creation-body {
    & section {
        margin-bottom: 20px;
    }

    #announce-new-stream {
        margin: 20px auto;
    }
}

.stream-row,
.group-row {
    padding: 0.9375em 0.625em 0.6875em; /* 15px 10px 11px at 16px font size */
    border-bottom: 1px solid var(--color-border-modal-bar);
    cursor: pointer;
    display: flex;
    align-items: center;

    .check {
        width: 1.5625em; /* 25px at 16px font size */
        height: 1.5625em; /* 25px at 16px font size */
        margin-right: 0.75em; /* 12px at 16px font size */
        background-size: 60% auto;
        background-repeat: no-repeat;
        background-position: center center;
        display: flex;
        justify-content: center;

        & .sub-unsub-icon {
            display: flex;
            height: 100%;
            align-items: center;
            /* This color is used in .subscriber-check-icon of the help
               center to make the icon color same as the web app. Do change
               the color there when changing the color here */
            color: var(--color-stream-group-row-plus-icon);
            font-size: 1.0938em; /* 70% of 1.5625em */

            &.hide {
                display: none;
            }
        }

        &.checked:hover .sub-unsub-icon {
            color: var(--color-stream-group-row-checked-icon-hover);
        }

        &.not-direct-member {
            .sub-unsub-icon {
                cursor: default;
            }
        }

        &.disabled {
            &:not(.checked) .sub-unsub-icon {
                /* Change opacity to 50% in dark mode */
                color: var(--color-stream-group-row-plus-icon-disabled);
            }

            .sub-unsub-icon {
                color: var(--color-stream-group-row-checked-icon-disabled);
                cursor: not-allowed;
            }
        }

        .sub_unsub_status,
        .join_leave_status {
            display: inline-block !important;
            height: auto !important;
            width: auto !important;

            .loading_indicator_spinner {
                width: 100%;
                height: 100%;
                margin: 0;
            }

            .loading_indicator_spinner svg path {
                fill: hsl(178deg 100% 40%);
            }
        }
    }

    .checked .sub-unsub-icon {
        /* This color is used in .subscriber-check-icon of the help
           center to make the icon color same as the web app. Do change
           the color there when changing the color here */
        color: var(--color-stream-group-row-checked-icon);
    }

    .check:not(.checked, .disabled):hover .sub-unsub-icon,
    &.active .check:not(.checked, .disabled):hover .sub-unsub-icon {
        color: var(--color-stream-group-row-plus-icon-hover);
    }

    .icon {
        width: 2.1875em; /* 35px at 16px font size */
        height: 2.1875em; /* 35px at 16px font size */
        margin-right: 0.75em; /* 12px at 16px font size */
        background-color: hsl(300deg 100% 25%);
        border-radius: 4px;
        color: hsl(0deg 0% 100%);

        .symbol {
            font-weight: 600;
            font-size: 1.1em;
        }

        .hashtag {
            font-size: 1.4em;
            font-weight: 600;
        }
    }

    .sub-info-box {
        /* 5.5em = width of checkmark (1.5625em) + right margin for checkmark (0.75em)
        + width of privacy icon (2.1875em) + right margin for privacy icon (0.75em) +
        right margin for this element (0.25em) */
        width: calc(100% - 5.5em);
    }

    .group-info-box {
        /* 2.5625em = width of checkmark (1.5625em) + right margin for checkmark (0.75em)
        + right margin for this element (0.25em) */
        width: calc(100% - 2.5625em);
    }

    .sub-info-box,
    .group-info-box {
        margin-right: 0.25em; /* 4px at 16px font size */

        .top-bar,
        .bottom-bar {
            display: flex;
            justify-content: space-between;
            position: relative;
        }

        .top-bar .group-name-wrapper {
            overflow: hidden;
        }

        .top-bar .stream-name,
        .top-bar .group-name,
        .bottom-bar .description {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .top-bar .stream-name,
        .bottom-bar .description {
            margin-right: 0.75em; /* 12px at 16px font size */
        }

        .top-bar .subscriber-count,
        .bottom-bar .stream-message-count {
            white-space: nowrap;
            color: hsl(0deg 0% 67%);
        }

        .top-bar .subscriber-count-text,
        .top-bar .subscriber-count-lock,
        .bottom-bar .stream-message-count-text {
            margin-right: 0.3125em; /* 5px at 16px font size */
        }

        .top-bar .stream-name {
            font-weight: 600;
        }

        .bottom-bar {
            line-height: 1.5;
        }
    }

    &.active {
        background-color: var(--color-active-row-modal);
    }

    &::selection,
    .icon .hashtag::selection {
        background-color: transparent;
    }
}

.stream-row .sub-info-box .description:empty::after,
.group-row .group-info-box .description:empty::after {
    content: attr(data-no-description);
    font-style: italic;
    color: hsl(0deg 0% 67%);
}

.subscriber_list_settings .add_subscribers_disabled,
.member_list_settings .add_members_disabled {
    cursor: not-allowed;

    .pill-container {
        cursor: not-allowed;
        pointer-events: none;
    }
}

.subscriber_list_settings,
.member_list_settings {
    & button[disabled] {
        pointer-events: none;
    }
}

.org-permissions-form,
.group-permissions,
.advanced-configurations-container,
.channel-permissions {
    .group_setting_disabled {
        cursor: not-allowed;
        /* This ensures that we do not see the not allowed cursor in the
           extra space of a div */
        width: fit-content;

        /* This specific rules are needed to override the default settings
           of these elements */
        .pill-container,
        .group-setting-label {
            cursor: not-allowed;
        }

        .pill-container {
            opacity: 0.7;

            .pill {
                .exit {
                    display: none;
                }
            }

            .input {
                pointer-events: none;
            }
        }
    }
}

#settings_page,
.two-pane-settings-overlay {
    container: settings-overlay / inline-size;
}

.two-pane-settings-overlay {
    .tab-switcher {
        display: flex;
        flex-wrap: nowrap;
        height: var(--settings-overlay-header-button-height);
    }

    #user-group-creation,
    #stream-creation {
        overflow: auto;
        outline: none;
        -webkit-overflow-scrolling: touch;

        .user-group-creation-body,
        .stream-creation-body {
            padding: 15px 15px 0;
        }

        .settings-sticky-footer {
            display: flex;
            justify-content: space-between;
            padding: 9px 15px;
            text-align: right;
            background-color: var(--color-background-modal-bar);
            border-top: 1px solid var(--color-border-modal-bar);
        }

        @container settings-overlay (width > $settings_overlay_sidebar_collapse_breakpoint) {
            .settings-sticky-footer {
                border-radius: 0 0 6px;
            }
        }

        .create_user_group_member_list_header,
        .create_stream_subscriber_list_header {
            margin-top: 10px;
            margin-bottom: 3px;

            & h5 {
                display: inline-block;
            }
        }

        .add-user-list-filter {
            width: 140px;
            float: right;
        }

        #user_group_creation_form,
        #stream_creation_form {
            margin: 0;

            .user_group_create_info.show {
                margin: 5px;
            }

            #user_group_creating_indicator,
            #stream_creating_indicator {
                &:not(:empty) {
                    position: absolute;
                    width: 100% !important;
                    height: calc(100% - 105px) !important;
                    display: flex !important;
                    justify-content: center;
                    align-items: center;
                    background-color: var(
                        --color-background-non-empty-overlay-indicator
                    );
                    z-index: 1;
                }

                .loading_indicator_text {
                    font-weight: 400;
                }
            }
        }
    }

    .inner-box {
        margin: 18px;
    }

    .group_settings_header,
    .stream_settings_header {
        white-space: nowrap;
        display: flex;
        margin-left: 18px;

        .tab-container {
            .tab-switcher {
                margin: 0;
            }

            .ind-tab {
                padding: 0 4px;
                min-width: 5.7142em; /* 80px at 14px/em */
                width: auto;
                display: flex;
            }
        }

        .button-group {
            padding-top: 5px;
            margin-left: auto;
            margin-right: 18px;
            height: var(--settings-overlay-header-button-height);
            display: flex;

            .subscribe-button,
            .join_leave_button,
            #preview-stream-button {
                height: 100%;
                margin-left: 3px;
            }
        }
    }

    .group-header,
    .stream-header {
        white-space: nowrap;
        padding-top: 5px;
        display: flex;
        align-items: center;

        .group-name-wrapper,
        .stream-name {
            position: relative;
            font-size: 1.5em;
            font-weight: 600;
            white-space: nowrap;
            max-width: 90%;
            flex: auto;
            min-width: 0;
            overflow-x: clip;
            text-overflow: ellipsis;

            .group-name,
            .sub-stream-name {
                display: block;
                width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }

        #open_group_info_modal {
            display: flex;
            align-items: center;
        }

        .button-group {
            margin-left: auto;

            /* This icon is narrower in width, we have to explicitly
               set it's width to 1em so that it vertically aligns with
               other buttons near it. */
            .fa-pencil {
                width: 1em;
            }

            .deactivate,
            .reactivate {
                margin-right: 3px;
                text-decoration: none;
            }
        }

        .large-icon {
            display: flex;
            margin-right: 5px;

            &.hash::after {
                top: -1px;
                font-size: 1.09em;
                font-weight: 700;
            }

            .zulip-icon {
                font-size: 1.2857em; /* 18px at 14px/em */
            }
        }

        .group_change_property_info,
        .stream_change_property_info {
            vertical-align: top;
            margin: 0 5px 0 0;
        }
    }

    .group-description-wrapper,
    .stream-description {
        hyphens: auto;
        margin-bottom: 10px;

        .no-description {
            font-style: italic;
            color: hsl(0deg 0% 67%);
        }
    }

    .checkmark {
        display: none;
        margin-left: 5px;
        color: hsl(0deg 0% 67%);

        cursor: pointer;

        &.show {
            display: block;
        }
    }

    .hash::after {
        position: relative;
        content: "#";
    }

    .settings {
        position: relative;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;

        .tab-container {
            padding-top: 5px;
        }
    }

    .subscription_settings {
        display: none;
        position: relative;
        width: 100%;
        margin: 0 auto;
        border-radius: 4px;
        top: -1px;

        &.show {
            display: block;
        }
    }

    #personal-stream-settings {
        .stream_change_property_status {
            margin: 9px auto 3px 3px;
        }
    }

    .stream_details_box,
    .group_detail_box {
        margin: 0 0 10px; /* mimic paragraph spacing */
    }

    .loading_indicator_text {
        font-weight: 400;
        line-height: 20px;
    }

    .subsection-parent .input-group {
        & input[type="checkbox"] {
            margin-top: 0;
        }

        &:last-of-type {
            border-bottom: none;
        }

        & input[type="radio"] {
            margin-right: 5px;
        }

        .inline {
            display: inline !important;
        }
    }

    .icon-button {
        font-size: 1.2em;
    }
}

div.settings-radio-input-parent {
    border-bottom: 1px solid var(--color-border-settings-radio-input-parent);
    margin: 2px 0 2px 5px;
    padding: 2px 0;

    &:last-of-type {
        border-bottom: none;
    }

    & label.radio {
        display: inline;
        margin: 5px;
    }

    & input {
        float: left;
        width: auto;
        cursor: pointer;
        /* Scale the height with font-size, 14px at 1em */
        height: 1em;
        /* This value came from fiddling to find what looked
           vertically centered at 12px-20px font sizes. */
        margin-top: 0.15em;

        &:focus {
            outline: 1px dotted hsl(0deg 0% 20%);
            outline: 5px auto -webkit-focus-ring-color;
            outline-offset: -2px;
        }

        &:disabled {
            cursor: not-allowed;
        }
    }

    &.default_stream_private_tooltip {
        cursor: not-allowed;

        & label {
            pointer-events: none;
        }
    }
}

.new-stream-configuration,
.channel-permissions,
.group-permissions,
.stream_details_box {
    .input-group {
        margin-bottom: 0.625em; /* 10px at 16px/em */

        &.message-retention-setting-group {
            & input {
                width: 5ch;
                text-align: right;
            }
        }
    }

    .settings_select {
        /* Match with select elements in settings page. See there
           for comments about these values. */
        box-sizing: unset;
        width: calc(var(--modal-input-width) - 33px);
        max-width: 100%;
        padding-top: 4px;
        padding-bottom: 4px;
        height: 1.4em;
    }
}

#subscription_overlay .default-stream {
    width: fit-content;

    .inline {
        display: inline;
    }
}

#stream_creation_form .default-stream {
    margin: 20px 0;
}

.group-permissions .pill-container,
.advanced-configurations-container .pill-container,
.channel-permissions .pill-container {
    /* Subtract 2 * (2px padding) + 2 * (1px border) */
    min-width: calc(var(--modal-input-width) - 6px);

    .input:first-child:empty::before {
        opacity: 0.5;
        content: attr(data-placeholder);
    }
}

.advanced-configurations-container .pill-container,
.channel-permissions .pill-container {
    margin-bottom: 10px;
}

.group-permissions .dropdown_widget_with_label_wrapper {
    display: inline-block;
    height: 30px;
    margin-bottom: 10px;
}

#change_user_group_description,
#change_stream_description,
#new_channel_folder_description,
#edit_channel_folder_description {
    height: 80px;
    margin-bottom: 4px;
}

.advanced-configurations-container,
.channel-permissions {
    .stream-message-retention-days-input input[type="text"] {
        border-radius: 5px;
        box-shadow: none;
        margin: 0;
        height: inherit;
    }
}

.group-setting-label {
    /* Avoid having the clickable area extend to the full width of the containing element */
    width: fit-content;
}

.stream-settings-color-selector {
    border: 1px solid var(--color-border-zulip-button);
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;

    &.action-button-quiet-neutral {
        box-shadow: none;
    }
}

.stream-settings-color-preview {
    /* 28px at 16px font size */
    width: 1.75em;
    height: 1.75em;
    /* -6px 0 -6px 10px at 16px font size. */
    margin: -0.375em 0 -0.375em -0.625em;
}

#subscription_overlay .channel-folder-widget-container {
    display: flex;
    gap: 0.5em;
    width: auto;
    /* Set minimum width such that the total width of dropdown
    button and "Create folder" button is at least equal to the
    minimum width of pill inputs for permission settings. */
    min-width: var(--modal-input-width);
    flex-wrap: wrap;

    .dropdown_widget_value {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

#deactivation-confirm-modal {
    .alert {
        padding-right: 14px;
    }

    .cannot-deactivate-group-banner {
        border: none;
        margin: 0;

        .banner-text {
            margin: 0;
            padding-right: 4px;
        }

        .permissions-button {
            text-wrap: nowrap;

            &:focus {
                outline: 0;
            }
        }
    }
}

@media (width < $lg_min) {
    .two-pane-settings-container {
        max-width: 95%;
    }

    #groups_overlay .group_settings_header,
    #subscription_overlay .stream_settings_header {
        flex-wrap: wrap;
    }
}

/* This ensures the left-border is tall enough. We can't keep this style for
    narrow screens because `right` is absolutely positioned on narrow screens. */
@container settings-overlay (width >= $settings_overlay_sidebar_collapse_breakpoint) {
    .two-pane-settings-container .right {
        height: 100%;
    }
}

/* We should eventually consolidate some of these styles with the styles
   in settings.css, using shared classnames. */
@container settings-overlay (width < $settings_overlay_sidebar_collapse_breakpoint) {
    .two-pane-settings-container {
        position: relative;
        overflow: hidden;

        /* This variable allows JavaScript to detect whether we are showing both
        the left sidebar and settings content for the current screen width or not. */
        --column-count: 1;

        .two-pane-settings-header .fa-chevron-left {
            visibility: visible;
        }

        .two-pane-settings-header.slide-left {
            border-bottom: none;
        }
    }

    .two-pane-settings-overlay .left {
        overflow: hidden;
        width: 100%;
    }

    .two-pane-settings-overlay .right {
        position: absolute;
        transform: translateX(101%);
        transition: transform 0.3s ease;
        background-color: var(--color-background-modal);
        z-index: 10;
        width: 100%;

        &.show {
            transform: translateX(0%);
        }
    }

    .two-pane-settings-overlay .settings {
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (width < $sm_min) {
    #groups_overlay .user_group_settings_wrapper,
    #subscription_overlay .subscription_settings {
        .button-group {
            display: block;
            float: right;
            margin-top: 10px;
        }

        .group-header,
        .stream-header {
            .button-group {
                margin-top: -5px;
            }
        }

        .group_change_property_info,
        .stream_change_property_info {
            /* For small widths where there is not enough space
            to show alert beside stream name we set its display
            to block so it is shown in new line. But to avoid
            it covering whole screen width we set max-width
            so that it does not losses inline-block appearance. */

            /* TODO: This will probably be not required once
            we have tabbed navigation as button group width
            will be smaller. */
            display: block;
            max-width: max-content;
            white-space: nowrap;
        }
    }
}

.selected-stream-title,
.user-group-info-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.selected-stream-title {
    display: block;
    margin: auto;
}

#stream_members_list,
#user_group_settings .member-list,
#stream_creation_form .subscriber-list,
#user_group_creation_form .member-list {
    table-layout: fixed;
    width: 100%;

    th,
    td {
        box-sizing: border-box;
    }

    .panel_user_list {
        width: 50%;

        .pill-container {
            max-width: 100%;

            .pill-value {
                /* This is needed to unset the max-width value of 165px
                set for user pills in other tables. */
                max-width: unset;
            }
        }
    }
}

#stream_members_list,
#user_group_settings .member-list {
    .remove-button-column {
        width: 3em;
    }

    .settings-email-column {
        width: calc(50% - 3em);
    }
}

#stream_creation_form .subscriber-list,
#user_group_creation_form .member-list {
    .action-column {
        width: 6em;
    }

    .settings-email-column {
        width: calc(50% - 6em);
    }
}

@media (width < $lg_min) {
    #stream_members_list,
    #user_group_settings .member-list,
    #stream_creation_form .subscriber-list,
    #user_group_creation_form .member-list {
        .panel_user_list {
            width: auto;
        }
    }
}
